<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪造官网</title>
    <link rel="shortcut icon" href="https://img1.baidu.com/it/u=3600306204,4254793728&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1670950800&t=0ebe2238e63b5b111ff3cc7b908a3d8d" type="image/x-icon"/>
    <!-- swiper -->
    <link rel="stylesheet" href="./assets/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./assets/css/animate.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet/less" href="./css/index.less">
    <link rel="stylesheet/less" href="./css/media.less">
    <link rel="stylesheet/less" href="./css/bottom.less">
</head>
<body>
    <!-- 第一个 -->
    <nav class="navigation">
        <input type="checkbox" name="ck" id="ck1" class="input">
        <input type="checkbox" name="ck" id="ck2" class="input">
        <div class="nav">
            <div>
                <img 
                src="https://img1.baidu.com/it/u=3600306204,4254793728&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1670950800&t=0ebe2238e63b5b111ff3cc7b908a3d8d" 
                usemap="#skypegmwcn">
    
                <map name="skypegmwcn" id="skypegmwcn">
                    <area shape="rect" coords="0,0,34,34" href="./index.html">
                </map>
            </div>
            
            
            <nav class="maxNav">
                <div class="fadeInDown" data-wow-delay=".1s">
                    <a href="#content1">锚点链接</a>
                </div>
                <div class="fadeInDown" data-wow-delay=".1s">
                    <a href="#content4">锚点链接</a>
                </div>
                <div class="fadeInDown" data-wow-delay=".1s">
                    <a href="#content2">锚点链接</a>
                </div>
                <div class="fadeInDown" data-wow-delay=".1s">
                    <a href="#content3">锚点链接</a>
                </div>
            </nav>
    
            <div class="user">
                <div class="login"><a href="./login.html">登入</a></div>
                <div class="register"><a href="./login.html">注册</a></div>
            </div>
        </div>
        

        <div class="minNav">
            <label for="ck1">
                <div class="minNav-user iconfont">
                    &#xe6a4;
                </div>
            </label>

            <label for="ck2">
                <div class="minNav-top">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </label>
            
        </div>
    </nav>

    <a href="#content1" class="top" id="top">
        top
        <div>回到顶部</div>
    </a>

    <div class="content">        
        <div class="content1 wow fadeInUp" data-wow-delay=".1s" id="content1">
            <img src="./img/maximg/1.jpeg">
            <a href="./shop.html" class="shop"></a>
        </div>

        <div class="content4" id="content4">
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./img/maximg/2-1.jpeg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="./img/maximg/2-2.jpeg" alt="">
                    </div>
                </div>

                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
        </div>

        <div class="content2 wow fadeInUp" data-wow-delay=".1s" id="content2">
            <img src="./img/maximg/3.jpeg">
        </div>

        <div class="content3 wow fadeInUp" data-wow-delay=".1s" id="content3">
            <img src="./img/maximg/4.jpeg" alt="">
            <img src="./img/maximg/5.jpeg" alt="">
        </div>

        <div class="body-bottom">
            <a href="#">
                关于我们>
            </a>
        </div>
    </div>
    <script src="./assets/js/jquery.min.js"></script>
    <script src="./assets/js/wow.min.js"></script>
    <script src="./assets/js/less.min.js"></script>
    <!-- swiper -->
    <script src="./assets/css/swiper-bundle.min.js"> </script>
    <script>
        // wow初始化
        new WOW().init();
         // 回顶按钮隐藏
        window.addEventListener('scroll',(e) => {
            let pageTop = window.pageYOffset;
            if (pageTop >= 200) {
                atop.style.display = 'block';
            }else {
                atop.style.display = 'none';
            }
        });
        // 伪单选（小屏幕菜单按钮）
        let ck1 = document.getElementById('ck1');
        let ck2 = document.getElementById('ck2');
        let atop = document.getElementById('top');
        ck1.addEventListener('click',() => {
            if (ck1.checked) {
                ck2.checked = false
            }
        });
        ck2.addEventListener('click',() => {
            if (ck2.checked) {
                ck1.checked = false
            }
        });
        // 防抖定时器
        let st = null;
        // 是否自动切换
        let isAutoplay = true;
        // 切换时间
        let time = 1500;
        // 自动高度（由slide决定）
        let slide = true;
        let lop = true;
        let pagination = {
            el: '.swiper-pagination'
        };
        let navigation = {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        };
        let mySwiper = new Swiper('.swiper', {
            // autoplay: isAutoplay,//可选选项，自动滑动
            speed: time,
            autoHeight: slide,
            loop: lop,
            pagination: pagination,
            navigation: navigation,
        });
        mySwiper.slideNext();
        
    </script>
</body>
</html>